<template>
  <div class="agri-right">
    <dv-border-box-8 style="height: 550px;">
    <div class="top">
      <!-- 1 -->
      <div class="top-box">
        <div class="name">全国白菜猪肉价格指数</div>
        <div class="num">
          <div class="fo">20.23</div>
          <img src="../../../assets/img/agriculture/jg_up.png" alt="">
        </div>
        <div class="data">
          <img src="../../../assets/img/agriculture/jg_echar8.png" alt="" />
        </div>
        <div class="time">
          <span>发布时间：2024-05-17</span>
        </div>
        <div class="ico">
          <img width="70" src="../../../assets/img/agriculture/jg_ico5.png" alt="">
        </div>
        <div class="hb" style="color: #CC171C;">
          <span>+0.05%</span>
          <p>环比</p>
        </div>
      </div>
      <!-- 2 -->
      <div class="top-box">
        <div class="name">辣椒批发指数</div>
        <div class="num">
          <div class="fo">1226.87</div>
          <img src="../../../assets/img/agriculture/jg_down.png" alt="">
        </div>
        <div class="data">
          <img src="../../../assets/img/agriculture/jg_echar8.png" alt="" />
        </div>
        <div class="time">
          <span>发布时间：2024-05-17</span>
        </div>
        <div class="ico" style="top: 60px;">
          <img width="70" src="../../../assets/img/agriculture/jg_ico2.png" alt="">
        </div>
        <div class="hb" style="color: #18853A;">
          <span>-0.32%</span>
          <p>环比</p>
        </div>
      </div>
      <!-- 3 -->
      <div class="top-box">
        <div class="name">蔬菜价格指数</div>
        <div class="num">
          <div class="fo">1226.87</div>
          <img src="../../../assets/img/agriculture/jg_up.png" alt="">
        </div>
        <div class="data">
          <img src="../../../assets/img/agriculture/jg_echar8.png" alt="" />
        </div>
        <div class="time">
          <span>发布时间：2024-05-17</span>
        </div>
        <div class="ico">
          <img width="70" src="../../../assets/img/agriculture/jg_ico8.png" alt="">
        </div>
        <div class="hb" style="color: #CC171C;">
          <span>+0.03%</span>
          <p>环比</p>
        </div>
      </div>
      <!-- 4 -->
      <div class="top-box">
        <div class="name">西瓜产业指数</div>
        <div class="num">
          <div class="fo">20.23</div>
          <img src="../../../assets/img/agriculture/jg_down.png" alt="">
        </div>
        <div class="data">
          <img src="../../../assets/img/agriculture/jg_echar8.png" alt="" />
        </div>
        <div class="time">
          <span>发布时间：2024-05-17</span>
        </div>
        <div class="ico" style="top: 60px;">
          <img width="70" src="../../../assets/img/agriculture/jg_ico6.png" alt="">
        </div>
        <div class="hb" style="color: #18853A;">
          <span>-0.83%</span>
          <p>环比</p>
        </div>
      </div>
    </div>
  </dv-border-box-8>
    <dv-border-box-8 style="margin-top: 10px;padding: 10px;height: 380px;">
        <div>
          <h2>各类水果蔬菜价格趋势</h2>
          <Echart :options="options1" height="350px" />
        </div>
      </dv-border-box-8>
  </div>
</template>

<script>
import Echart from "@/common/echart/index.vue";
export default {
  name: "agri-righ",
  components:{Echart},
  data() {
    return{
      options1: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["南瓜", "苹果"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "南瓜",
            type: "line",
            data: [800, 910, 900, 920, 1400, 1500, 1550, 1700,1400, 1500, 1550,1490],
          },
          {
            name: "苹果",
            type: "line",
            data: [220, 610, 600, 620, 890, 1000, 1100, 1300,1200, 1123, 1250, 1234],
          },
        ],
      },
    }
  }
};
</script>

<style scoped lang="scss">
.agri-right {
  flex: 1;
  margin-left: 10px;
}
.hb{
  width: 64px;
        height: 34px;
        position: absolute;
        right: 15px;
        bottom: 72px;
        font-size: 16px;
        font-weight: bold;
    
}
.ico{
  width: 64px;
        height: 51px;
        position: absolute;
        right: 25px;
        top: 70px;
        text-align: center;
}
.time{
  margin-top: 15px;
  font-size: 14px;
  color: #cfcfcf;
}
.data {
  margin-top: 10px;
  width: 158px;
  height: 51px;
  img {
    width: 100%;
    height: 100%;
  }
}
.num {
  margin-top: 15px;
  font-size: 34px;
  line-height: 51px;
  font-weight: bold;
  font-family: Arial;
  color: #fff;
  .fo {
    display: inline-block;
  }
  img {
    
    width: 18px;
    height: 11px;
    display: inline-block;
    margin-left: 8px;
  }
}
.name {
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  font-weight: bold;
}
.top {
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  .top-box {
    flex: 40%;
    position: relative;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 20px;
    margin-left: 20px;
    padding: 20px;
    background-color: #041f41;
    height: 250px;
  }
}
</style>
